<template>
    <!-- 维修事件 -->
    <div class="layout-padding">
      <basic-container class="layout-padding-auto layout-padding-view">
        <avue-crud
            ref='crud'
            v-model='form'
            :page='page'
            :data='tableData'
            :permission='permissionList'
            :table-loading='tableLoading'
            :option='tableOption'
            :before-open='handleOpenBefore'
            :cell-class-name='addClass'
            @on-load='getList'
            @search-change='searchChange'
            @refresh-change='refreshChange'
            @size-change='sizeChange'
            @current-change='currentChange'
            @cell-click='clickCell'
            @row-update='handleUpdate'
            @row-save='handleSave'
            @row-del='rowDel'
            @selection-change='selectionChange'
        >
          <template #menu-left>
            <!-- v-if='permissions.om_omrepairevent_del' -->
            <el-button
               
                class='filter-item'
                plain
                type='primary'
                icon='el-icon-delete'
                @click='plDelete'
            >
              批量删除
            </el-button>
            <!--          <el-button-->
            <!--              v-if='permissions.om_omrepairevent_export'-->
            <!--              class="filter-item"-->
            <!--              plain-->
            <!--              type="primary"-->
            <!--              icon="el-icon-download"-->
            <!--              @click="exportExcel">导出-->
            <!--          </el-button>-->
          </template>
          <template #eventStatus='{ row }'>
            <el-tag v-if="row.eventStatus === '6'">未指派</el-tag>
            <el-tag v-if="row.eventStatus === '0'">待处理</el-tag>
            <el-tag type='warning' v-if="row.eventStatus === '1'">处理中</el-tag>
            <el-tag type='success' v-if="row.eventStatus === '2'">已处理</el-tag>
            <el-tag type='success' v-if="row.eventStatus === '3'">转工单</el-tag>
            <el-tag type='info' v-if="row.eventStatus === '4'">事件关闭</el-tag>
            <el-tag type='success' v-if="row.eventStatus === '5'">已评价</el-tag>
            <el-tag type='success' v-if="row.eventStatus === '7'">已取消</el-tag>
            <el-tag type='success' v-if="row.eventStatus === '8' ">已打开</el-tag>
          </template>
          <template #menu='scope'>
            <el-button type='primary'
                       icon='el-icon-edit'
                       text
                       :disabled='scope.row.eventStatus==="4"'
                       @click='$refs.crud.rowEdit(scope.row,scope.index)'>编辑
            </el-button>
            <el-button type='primary'
                       text
                       icon='el-icon-delete'
                       @click='$refs.crud.rowDel(scope.row,scope.index)'>删除
            </el-button>
            <!-- v-if='permissions.om_omrepairevent_controls' -->
            <el-dropdown >
              <span class='el-dropdown-link' style="margin-left: 5px;">
                操作
                <el-icon class='el-icon--right' style="margin-left: -2px;">
                  <arrow-down/>
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                      :disabled="
                      scope.row.eventStatus === '2' ||
                      scope.row.eventStatus === '3' ||
                      scope.row.eventStatus === '4' ||
                      scope.row.eventStatus === '5' ||
                      scope.row.eventStatus === '7'
                    "
                      @click='changeEvent(scope.row)'
                  >转工单
                  </el-dropdown-item
                  >
                  <el-dropdown-item
                      :disabled="scope.row.eventStatus === '4' "
                      @click='closeEvent(scope.row)'
                  >关闭
                  </el-dropdown-item
                  >
                  <el-dropdown-item
                      :disabled="
                      scope.row.eventStatus === '0' ||
                      scope.row.eventStatus === '1' ||
                      scope.row.eventStatus === '5'
                    "
                      @click='appraiseEvent(scope.row)'
                  >取消
                  </el-dropdown-item
                  >
                  <el-dropdown-item
                      :disabled="
                      scope.row.eventStatus === '0'
                    "
                      @click='openEvent(scope.row)'
                  >打开
                  </el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template #eventArea-form>
            <avue-input-tree
                filterable
                v-model='form.eventArea'
                :dic='treeLocationData'
                :props='defaultProps'
                type='tree'
                placeholder='请选择事件区域'
            ></avue-input-tree>
          </template>
          <template #equipName-form>
            <div class='span-title'>
              <div class='span-input'>
                <el-input
                    v-model='form.equipName'
                    placeholder='请选择设备'
                ></el-input>
              </div>
              <div class='span-btn'>
                <el-button
                    type='primary'
                    plain
                    @click='getDevForm'
                >选择设备
                </el-button
                >
              </div>
            </div>
          </template>
          <template #fileList-form>
            <ImgUpload @changeFile='changeFile' :fileData='fileData'/>
          </template>
        </avue-crud>
      </basic-container>
      <el-dialog
          v-if='dialogFormVisible3'
          v-model='dialogFormVisible3'
          title='取消工单'
          width='38%'
          @close='dialogFormVisible3Close'
      >
        <el-form-item label='取消意见'>
          <el-input type='textarea' v-model='confirmSug'></el-input>
        </el-form-item>
        <template #footer>
          <span class='dialog-footer'>
            <el-button @click='dialogFormVisible3 = false'>取消</el-button>
            <el-button type='primary' @click='confirmAppraise'> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
      <OmeventInfo ref='omeventInfo'></OmeventInfo>
      <DevForm ref='devFormRef' @getDeviceName='getDeviceName'></DevForm>
    </div>
  </template>
  
  <script>
  import {
    fetchList,
    addObj,
    putObj,
    delObj,
    delAllObj,
    fetchTree,
    operaEvent,
    getEventName
  } from '/@/api/maintenance/event'
  import {getUserById} from '/@/api/maintenance/order'
  import OmeventInfo from './info/index.vue'
  import DevForm from "/@/views/om/eventmanagement/devForm/index.vue";
  import ImgUpload from '/@/components/ImageUpload/order.vue'
  import {tableOption} from '/@/const/crud/maintenance/event'
//   import {mapGetters} from 'vuex'
  import template from "/@/views/ommaintenance/repair/template/index.vue";
  
  export default {
    name: 'omwevent',
    components: { OmeventInfo, DevForm, ImgUpload},
    data() {
      return {
        selectList: [],
        form: {},
        treeLocationData: [],
        defaultPropstree: {
          label: 'name',
          value: 'id'
        },
        fileList: [],
        fileData: [],
        searchForm: {},
        tableData: [],
        orderUserData: [],
        modelTypeData: [],
        devTypeData: [],
        deviceNameData: [],
        defaultProps: {
          label: 'subareaCn',
          value: 'subareaCode',
          children:'childrens'
        },
        defaultProps5: {
          label: 'bamAssetsTypeAlias',
          value: 'bamAssetsTypeCode'
        },
        defaultProps6: {
          label: 'bamAAssetsModelCn',
          value: 'bamAAssetsDeviceCode'
        },
        defaultProps7: {
          label: 'assetsName',
          value: 'assetsName'
        },
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableLoading: false,
        tableOption: tableOption,
        dialogFormVisible: false,
        handleDept: '',
        handleUser: '',
        handleDeptData: [],
        handleUserData: [],
        defaultProps1: {
          label: 'name',
          value: 'id'
        },
        defaultProps2: {
          label: 'name',
          value: 'userId'
        },
        dialogFormVisible3: false,
        confirmSug: '',
        eventNo: '',
        openType: ''
      }
    },
    computed: {
    //   ...mapGetters(['permissions', 'userInfo']),
      permissionList() {
        return {
        //   getBtn: this.validData(this.permissions.om_omrepairevent_get, false),
        //   addBtn: this.validData(this.permissions.om_omrepairevent_add, false),
        //   editBtn: this.validData(this.permissions.om_omrepairevent_edit, false),
        //   delBtn: this.validData(this.permissions.om_omrepairevent_del, false),
        }
      },
      userId() {
        return JSON.parse(sessionStorage.getItem('pig-userInfo')).content.userId
      }
    },
    watch: {
      'form.sourceOfEvent': {
        handler(val, oldVal) {
          if (val && val !== oldVal && this.openType === 'add') {
            let type =
                val === '1' ? '电话报修' : '' || val === '2' ? '系统生成' : '' ||
                val === '3' ? '巡检生成' : '' || val === '4' ? '保养报修' : '' || val === '5' ? '其他报修' : ''
            getEventName(type).then((res) => {
              this.form.eventName = res.data
            })
          }
        }
      },
      'form.handleUserId': {
        handler(val, oldVal) {
          if (val) {
            getUserById(val).then((res) => {
              this.orderUserData = res.data
              this.form.handleUserPhone = this.orderUserData.phone
              this.form.handleUserName = this.orderUserData.name
            })
          } else {
            this.form.handleUserPhone = ''
          }
        }
      },
    },
    methods: {
      dialogFormVisible3Close() {
        this.dialogFormVisible3 = false
        this.confirmSug = ''
      },
      getList(page, params) {
        this.tableLoading = true
        fetchList(
            Object.assign(
                {
                  current: page.currentPage,
                  size: page.pageSize
                },
                params,
                this.searchForm
            )
        )
            .then((response) => {
              this.tableData = response.data.records
              this.page.total = response.data.total
              this.tableLoading = false
            })
            .catch(() => {
              this.tableLoading = false
            })
      },
      rowDel: function (row, index) {
        this.$confirm('是否确认删除事件' + '"' + row.eventNo + '"', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(function () {
              return delObj(row.evId)
            })
            .then((data) => {
              this.$message.success('删除成功')
              this.getList(this.page)
            })
            .catch((error) => {
            })
      },
      handleUpdate: function (row, index, done, loading) {
        row.handleType = 0 + ''
        putObj(row)
            .then((data) => {
              this.$message.success('修改成功')
              done()
              this.getList(this.page)
            })
            .catch(() => {
              loading()
            })
      },
      handleSave: function (row, done, loading) {
        row.handleType = 0 + ''
        addObj(row)
            .then((data) => {
              this.$message.success('添加成功')
              done()
              this.getList(this.page)
            })
            .catch(() => {
              loading()
            })
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      currentChange(current) {
        this.page.currentPage = current
      },
      searchChange(form, done) {
        this.searchForm = form
        this.page.currentPage = 1
        this.getList(this.page, form)
        done()
      },
      refreshChange() {
        this.getList(this.page)
      },
      handleOpenBefore(show, type) {
        this.openType = type
        //区域树
        fetchTree().then((res) => {
          this.treeLocationData = res.data.records
        })
        if (type === 'add') {
          this.fileData = []
          this.$refs.devFormRef.selectRow = -1
        }
        if (type === 'edit') {
          this.fileData = this.form.fileList
        }
        show()
      },
      changeEvent(row) {
        this.$confirm('是否确认转工单', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          operaEvent({eventNo: row.eventNo, eventStatus: 3 + ''}).then((res) => {
            this.$message.success('转工单成功')
            this.getList(this.page)
          })
        }).catch(() => {
  
        })
      },
      openEvent(row) {
        this.$confirm('是否确认打开', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          operaEvent({eventNo: row.eventNo, eventStatus: 8 + ''}).then((res) => {
            this.$message.success('打开成功')
            this.getList(this.page)
          })
        }).catch(() => {
  
        })
      },
      closeEvent(row) {
        this.$confirm('是否确认关闭事件', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          operaEvent({eventNo: row.eventNo, eventStatus: 4 + ''}).then((res) => {
            this.$message.success('关闭成功')
            this.getList(this.page)
          })
        }).catch(() => {
  
        })
      },
      appraiseEvent(row) {
        this.dialogFormVisible3 = true
        this.eventNo = row.eventNo
      },
      confirmAppraise() {
        let obj = {
          eventNo: this.eventNo,
          remark: this.confirmSug,
          eventStatus: 7 + ''
        }
        operaEvent(obj)
            .then((res) => {
              this.$message.success('事件已取消')
              this.dialogFormVisible3 = false
              this.getList(this.page)
            })
            .catch((err) => this.$message.error(err))
      },
      addClass({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 2) {
          return 'cell-blue'
        }
      },
      clickCell(row, column, cell, event) {
        if (column.label === '事件编码') {
          this.$refs.omeventInfo.dialogVisible = true
          this.$refs.omeventInfo.infoData = row
        }
      },
      getDevForm() {
        this.$refs.devFormRef.visible = true
      },
      getDeviceName(list) {
        this.form.equipName = list.deviceName
        this.form.equipNo = list.unitNo
        this.form.eventArea = list.subareaCode
      },
      changeFile(list) {
        this.form.fileList = list
        this.form.fileList.forEach((item) => {
          item.eventNo = this.form.eventNo
        })
      },
      selectionChange(list) {
        this.selectList = list
      },
      //批量删除
      plDelete() {
        if (this.selectList.length > 0) {
          this.$confirm('是否确认删除以选择的数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
              .then(() => {
                let ids = []
                this.selectList.forEach((data) => {
                  ids.push(data?.evId)
                })
                return delAllObj(ids).then((res) => {
                  this.$message.success('删除成功')
                  this.getList(this.page)
                }).catch(() => {
                  this.$message.error('删除失败')
                })
              })
              .then((data) => {
  
              })
              .catch((cancelorerror) => {
              })
        }
      },
      // 导出
      exportExcel() {
        this.downBlobFile('/om/omrepairmodel/export', this.searchForm, '设备维修模版.xlsx')
      },
    }
  }
  </script>
  <style lang='scss' scoped>
  .span-title {
    display: flex;
  
    .span-input {
      flex: 2;
    }
  }
  
  .theme-white .el-dropdown {
    margin-top: 7px;
  }
  
  .cell-blue {
    cursor: pointer !important;
    color: #409eff !important;
  }
  ::v-deep .avue-crud__menu {
	display: flex;
	align-items: center;
}
  </style>
  